<!DOCTYPE html>
<html>
<head>
<style>
p {
	background: yellow;
	font-weight: bold;
	cursor: pointer;
	padding: 5px;
}

p.over {
	background: #ccc;
}

span {
	color: red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<p>Click or double click here.</p>
	<span></span>
	<script>
	$("p").bind("click", function(event){var str = "( " + event.pageX + ", " + event.pageY + " )";
	$("span").text("Click happened! " + str);});
	$("p").bind("dblclick", function(){$("span").text("Double-click happened in " + this.nodeName);});
	$("p").bind("mouseenter mouseleave", function(event){$(this).toggleClass("over");});

	</script>
</body>
</html>